<template>
    <div class="homeContanner">
        <div class="tabcon">
            <section class="sectioncontainer" v-if="hometabindex===0">
                <Home></Home>
            </section>
            <section class="sectioncontainer" v-if="hometabindex===1">
                <GodRanking></GodRanking>
            </section>
            <section class="sectioncontainer" v-if="hometabindex===2">
                <Matchscore></Matchscore>
            </section>
            <section class="sectioncontainer" v-if="hometabindex===3">
                <My></My>
            </section>
        </div>
        <footer>
            <tabbar @on-index-change="tabschange">
                <tabbar-item :selected="index===hometabindex" v-for="(item,index) in tabs" :key="index">
                    <img slot="icon" :src="item.icon">
                    <img slot="icon-active" :src="item.activeicon">
                    <span class="color3" slot="label">{{item.name}}</span>
                </tabbar-item>
            </tabbar>
        </footer>
    </div>
</template>

<script>
    import {getShiLiGodListsR} from '../../service/god';
    import {dropLast, concat} from 'ramda';
    import {isphone, setDocumentTitle} from '../../uitls/common';
    import {getMytoken, getLogintoken} from '../../service/common';
    import {getHomeRecommedR, getsilderR} from '../../service/home';
    import {delay} from '../../uitls/common';
    import {Tabbar, TabbarItem} from 'vux';
    import Home from './index.vue';
    import GodRanking from '../god/ranking.vue';
    import Matchscore from '../matchs/score.vue';
    import My from '../my/index.vue';
    import store from '../../store/index';
    import {mapState} from 'vuex'

    export default {
        components: {
            Tabbar,
            TabbarItem,
            Home,
            GodRanking,
            Matchscore,
            My
        },
        data() {
            return {
                items: [Home, GodRanking, Matchscore, My],
                tabs: [{
                    name: '首页',
                    stitle: '懂彩帝',
                    icon: 'http://common-1253410441.file.myqcloud.com/activityimg/ICO1a@3x.png',
                    activeicon: 'http://common-1253410441.file.myqcloud.com/activityimg/ICO1@3x.png',
                }, {
                    name: '彩帝',
                    stitle: '彩帝',
                    icon: 'http://common-1253410441.file.myqcloud.com/activityimg/ICO2a@3x.png',
                    activeicon: 'http://common-1253410441.file.myqcloud.com/activityimg/ICO2@3x.png',
                }, {
                    name: '赛事',
                    stitle: '赛事',
                    icon: 'http://common-1253410441.file.myqcloud.com/activityimg/ICO3a@3x.png',
                    activeicon: 'http://common-1253410441.file.myqcloud.com/activityimg/ICO3@3x.png',
                }, {
                    name: '我的',
                    stitle: '我的',
                    icon: 'http://common-1253410441.file.myqcloud.com/activityimg/ICO4a@3x.png',
                    activeicon: 'http://common-1253410441.file.myqcloud.com/activityimg/ICO4@3x.png',
                }]

            }
        },
        filters: {},
        created() {

        },
        mounted: function () {

        },
        computed: {
            ...mapState('common', ['hometabindex'])
        },
        methods: {
            tabschange(index){
                setDocumentTitle(this.tabs[index].stitle);
                store.commit('common/hometabchange', {hometabindex: index});
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .homeContanner {
        height: 100%;
        display: flex;
        flex-direction: column;
        flex: 1;
        .tabcon {
            display: flex;
            flex: 1;
            flex-direction: column;
            overflow: scroll;
            -webkit-overflow-scrolling: touch;
            .sectioncontainer {
                display: flex;
                flex: 1;
                flex-direction: column;
            }
        }
        footer {
            display: flex;
            height: 106px;
        }
        .color3 {
            color: @color1;
        }
    }
</style>